<template>
  <div class="my-card">
    <el-row>
      <el-col :span="20">
        <div class="toolbar">
          <el-date-picker
            v-model="curTime"
            type="date"
            placeholder="时间"
            :picker-options="options">
          </el-date-picker>
        </div>
        <v-chart class="chartBox" :options="lineOption"/>
        <el-container style="display:flex;flex-direction:column;">
          <el-table
            :data="waterPredictionData.momentDatas"
            style="width: 100%"
            :default-sort = "{prop: 'date', order: 'descending'}"
            >
            <el-table-column
              prop="time"
              label="时间"
              sortable
              width="180">
            </el-table-column>
            <el-table-column
              prop="realFlow"
              label="实测流量（m3/h）"
              sortable>
            </el-table-column>
            <el-table-column
              prop="forecastFlow"
              label="预测流量（m3/h）"
              sortable>
            </el-table-column>
            <el-table-column
              prop="absoluteError"
              label="绝对误差（m3/h）"
              sortable>
            </el-table-column>
            <el-table-column
              prop="relativeError"
              label="相对误差（m3/h）"
              sortable>
            </el-table-column>
          </el-table>
        </el-container>
      </el-col>
      <el-col :span="4" v-if="title">
        <h4>{{title}}</h4>
        <el-row
          v-if="waterPredictionData.waterworksDatas"
          v-for="item in waterPredictionData.waterworksDatas"
          :key="item.waterworksId">
          <el-col :span="18"><div class="grid-content bg-purple">{{item.name}}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">{{item.realFlow}}</div></el-col>
        </el-row>
      </el-col>
      <el-col :span="4" v-else>
        <el-row>
          <el-col :span="18"><div class="grid-content bg-purple">当日总实测流量</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">{{item.totalRealFolw}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="18"><div class="grid-content bg-purple">当日总预测流量</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">{{item.totalForecastFlow}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="18"><div class="grid-content bg-purple">当日绝对误差</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">{{item.absoluteError}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="18"><div class="grid-content bg-purple">当日相对误差</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">{{item.relativeError}}</div></el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/gauge'
import echartsCommonOptions from '../config/echartsCommonOptions'
import { defaultsDeep } from 'lodash'
import moment from 'moment'
import axios from 'axios'
import { getWaterPredictionData } from './model'

export default {
  data () {
    return {
      mock: true,
      curTime: moment().subtract(1, 'M').format('YYYY-MM-DD'),
      waterPredictionData: {},
      today: moment().format('YYYY-MM-DD'),
      lineOption: {},
      options: {
        disabledDate (date) {
          console.log((new Date(date)).getTime() > (new Date()).getTime())
        }
      }
    }
  },
  computed: {
    title () {
      if (this.curTime === moment().subtract(1, 'M').format('YYYY-MM-DD')) {
        return '下一时刻预测值'
      } else {
        return ''
      }
    }
  },
  components: {
    'v-chart': ECharts
  },
  mounted () {
    this.getData(this.defaultDate)
  },
  methods: {
    initEchart () {
      let points = [[], [], [], []]
      let series = []
      let color = ['#c23531', '#2f4554', '#61a0a8', '#d48265']
      let options = {
        color: ['#c23531', '#2f4554', '#61a0a8', '#d48265'],
        name: ['实测流量', '预测流量', '绝对误差', '相对误差']
      }
      this.waterPredictionData.momentDatas.map((item, index) => {
        if (item) {
          points[0].push([item.time, item.realFlow])
          points[1].push([item.time, item.forecastFlow])
          points[2].push([item.time, item.absoluteError])
          points[3].push([item.time, item.relativeError])
        }
      })
      points.forEach((item, index) => {
        series.push({
          name: options.name[index],
          type: 'line',
          data: item,
          itemStyle: {
            color: options.color[index]
          }
        })
      })
      this.lineOption = defaultsDeep({
        tooltip: {
          formatter: (params, ticket, callback) => {
            const result = params
              .map(({ marker, seriesName, data }, index) => {
                return `${marker} ${seriesName} ${data[1]} `
              })
              .join('<br>')
            return `${result}`
          }
        },
        yAxis: {
          name: '用水量'
        },
        series
      }, echartsCommonOptions.lineOptions)
    },
    getData (date) {
      let params = {
        curDay: new Date()
      }
      if(!this.mock) {
        getWaterPredictionData(params).then(res => {
          this.openStatus = res.data.data.historyData
          this.initEchart()
        })
      } else {
        let waterPredictionData = {
          curDay: '2018-10-20',
          totalRealFolw: 2000,
          totalForecastFlow:2200,
          absoluteError: 200,
          relativeError: 0.05,
          momentDatas: [
            {
              time: '2018-10-10 0:05:00',
              realFlow: 100,
              forecastFlow: 110,
              absoluteError: 10,
              relativeError: 0.1
            },
            {
              time: '2018-10-10 01:05:00',
              realFlow: 105,
              forecastFlow: 108,
              absoluteError: 12,
              relativeError: 0.15
            },
            {
              time: '2018-10-10 02:05:00',
              realFlow: 108,
              forecastFlow: 112,
              absoluteError: 16,
              relativeError: 0.12
            },
            {
              time: '2018-10-10 03:05:00',
              realFlow: 110,
              forecastFlow: 114,
              absoluteError: 14,
              relativeError: 0.16
            }
          ],
          waterworksDatas: [
            {
              waterworksId: 10,
              name: '三坪水厂',
              realFlow: 110
            },
            {
              waterworksId: 15,
              name: '第五净化水厂',
              realFlow: 150
            },
            {
              waterworksId: 20,
              name: '第二净化水厂',
              realFlow: 180
            }
          ]
        }
        let sum = waterPredictionData.waterworksDatas.reduce((total, item) => {
          return total + item.realFlow
        }, 0)
        waterPredictionData.waterworksDatas = waterPredictionData.waterworksDatas.map((item) => {
          item.realFlow = (item.realFlow / sum).toFixed(2)
          return item
        })
        this.waterPredictionData = waterPredictionData
        this.initEchart()
      }
    }
  }
}
</script>

<style lang="sass" scoped>
// /deep/ .el-dialog__body
//   text-align: center;
.my-card
  width: 100%;
  background-color: #fff;
  padding: 15px;
  margin: 10px;
  overflow: scroll;
  .gauge-chart
    width: 300px;
    height: 200px;
  .toolbar
    position: relative;
    .my-btn
      position: absolute;
      top: 0;
      right: 0;
      margin: 0 10px;
  .grid-content
    // text-align: left;
  .dialogform
    padding: 16px
  .chartBox
    height: 350px;
    width: 100%;
  h4
    font-weight: 500;
</style>
